<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水逆退散局 - 运势建议</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="../assets/css/tailwind.css">
</head>
<body class="bg-gray-100">
  <div class="phone-frame mx-auto">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span>20:30</span>
      <div class="flex space-x-2">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 微信小程序顶部导航 -->
    <div class="wechat-header flex items-center">
      <a href="result.html" class="text-gray-800 px-3">
        <i class="fas fa-chevron-left"></i>
      </a>
      <span class="flex-1 text-center">运势建议</span>
      <div class="w-10"></div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="app-content p-4 bg-gray-50">
      <!-- 日期信息 -->
      <div class="text-center mb-4">
        <div class="text-sm text-gray-500">2024年6月15日 星期六</div>
        <div class="text-xs text-gray-400 mt-1">农历五月初十</div>
      </div>
      
      <!-- 总体建议 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-5">
        <h3 class="font-bold text-gray-800 mb-3">今日水逆建议</h3>
        <p class="text-gray-600 text-sm leading-relaxed">
          今日水星逆行影响较小，整体运势平稳。建议在处理重要事务时保持谨慎，避免做出冲动决定。
          多与家人沟通，维持良好人际关系。财运佳，适合进行稳健投资，但避免过度消费。
          健康方面需注意休息，保持良好作息习惯。
        </p>
      </div>
      
      <!-- 宜忌提示 -->
      <div class="flex gap-4 mb-5">
        <div class="bg-white rounded-lg shadow-md p-4 flex-1">
          <div class="flex items-center mb-3">
            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
              <i class="fas fa-check text-green-500"></i>
            </div>
            <h3 class="font-bold text-gray-800">宜</h3>
          </div>
          <ul class="text-sm text-gray-600 space-y-2">
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i>
              <span>投资理财</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i>
              <span>整理计划</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i>
              <span>家庭聚会</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-green-500 mt-1 mr-2"></i>
              <span>健身锻炼</span>
            </li>
          </ul>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 flex-1">
          <div class="flex items-center mb-3">
            <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
              <i class="fas fa-times text-red-500"></i>
            </div>
            <h3 class="font-bold text-gray-800">忌</h3>
          </div>
          <ul class="text-sm text-gray-600 space-y-2">
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i>
              <span>签订合同</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i>
              <span>重要出行</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i>
              <span>购买电子产品</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-circle text-xs text-red-500 mt-1 mr-2"></i>
              <span>冲动消费</span>
            </li>
          </ul>
        </div>
      </div>
      
      <!-- 改运方法 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-5">
        <h3 class="font-bold text-gray-800 mb-3">改运方法</h3>
        <div class="space-y-4">
          <div class="border-b border-gray-100 pb-3">
            <div class="flex items-center mb-2">
              <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
                <i class="fas fa-gem text-purple-500"></i>
              </div>
              <h4 class="font-semibold text-gray-700">佩戴幸运物品</h4>
            </div>
            <p class="text-sm text-gray-600">
              今日适合佩戴蓝色系饰品，如蓝水晶、青金石等，有助于增强运势，化解水逆带来的困扰。
            </p>
          </div>
          
          <div class="border-b border-gray-100 pb-3">
            <div class="flex items-center mb-2">
              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                <i class="fas fa-compass text-blue-500"></i>
              </div>
              <h4 class="font-semibold text-gray-700">朝向吉利方位</h4>
            </div>
            <p class="text-sm text-gray-600">
              今日东南方为吉利方位，可尝试将工作或休息区域朝向东南方，有助于提升整体运势。
            </p>
          </div>
          
          <div>
            <div class="flex items-center mb-2">
              <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
                <i class="fas fa-praying-hands text-yellow-500"></i>
              </div>
              <h4 class="font-semibold text-gray-700">开运仪式</h4>
            </div>
            <p class="text-sm text-gray-600">
              今日可点一盏蓝色香薰蜡烛，并静心冥想5分钟，想象自己身处蓝色光芒中，有助于净化能量，提升运势。
            </p>
          </div>
        </div>
      </div>
      
      <!-- 小贴士 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-16">
        <h3 class="font-bold text-gray-800 mb-3">水逆小贴士</h3>
        <div class="bg-blue-50 rounded-lg p-4 text-sm text-blue-600 leading-relaxed">
          <p class="mb-2"><i class="fas fa-info-circle mr-2"></i><strong>什么是水逆？</strong></p>
          <p>水星逆行是一种光学现象，指水星从地球上看起来反方向运行。在占星学中，水星掌管沟通、交通和技术，水逆期间这些领域容易出现混乱和误解。</p>
        </div>
        
        <div class="mt-4 space-y-3">
          <div class="flex items-start">
            <i class="fas fa-shield-alt text-gray-400 mt-1 mr-3"></i>
            <p class="text-sm text-gray-600">提前备份重要数据，避免信息丢失</p>
          </div>
          <div class="flex items-start">
            <i class="fas fa-shield-alt text-gray-400 mt-1 mr-3"></i>
            <p class="text-sm text-gray-600">出行时预留充足时间，避免迟到</p>
          </div>
          <div class="flex items-start">
            <i class="fas fa-shield-alt text-gray-400 mt-1 mr-3"></i>
            <p class="text-sm text-gray-600">沟通时保持耐心，避免误解和冲突</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="fixed bottom-0 left-0 right-0 h-14 bg-white border-t border-gray-200 flex justify-around items-center" style="width: 374px;">
      <a href="home.html" class="flex flex-col items-center">
        <i class="fas fa-home text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center">
        <i class="fas fa-history text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">历史</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center">
        <i class="fas fa-user text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">我的</span>
      </a>
    </div>
  </div>
</body>
</html> 